<template>
  <page-wrap ref="pageWrap" hideTab :back="!isShare" title="职途顾问" :show-top="showTop" :dark="loaded ? false : true"
    :hideSafeArea="true" :bg-color="dynamicColor">
    <template slot="title">
      <view class="title-container">
        <view class="left-arrow" v-if="isShare" @click="handleGotoZhiTuPage"></view>
        <span class="return-index" v-if="isShare" @click="handleGotoZhiTuPage">返回首页</span>
        <span>职途顾问</span>
      </view>
    </template>
    <view class="buy-page">
      <scroll-view class="container" scroll-y="true" @scroll="myPageScroll">
        <!-- <view class="sale-introduction-first"></view>
        <view class="sale-introduction-second"></view>
        <view class="sale-introduction-third"></view> -->
        <image class="sale-introduction-image" v-for="(item, index) in imageList" :key="index" :src="item"
          mode="widthFix"></image>
      </scroll-view>
      <view class="operation">
        <!-- 这里加一个变量来控制显示隐藏 -->
        <view v-if="showMoreProduct" class="left-button" @click="handleMoreProduct">更多求职工具</view>
        <view v-if="showMoreProduct" class="right-button" @click="showMore">
          <span style="margin-left: 30rpx">立即购买</span>
        </view>
        <view v-else class="right-button-solo" @click="showMore">
          <span style="margin-left: 35%">立即购买</span>
        </view>
      </view>
      <u-popup class="popup-info" v-if="showPopup" v-model="showPopup" :closeable="false" mode="bottom"
        border-radius="14" width="100%" height="70%">
        <view class="title">
          <view>选择服务项</view>
          <view class="close-button" @click="showPopup = false"></view>
        </view>
        <scroll-view scroll-y="true" class="choose-service">
          <view class="shop" v-for="(obj, index) in shopList" :key="index">
            <view class="shop-name" @click="addOrRemoveOneService(obj, index)">
              <view class="choose-button" v-if="obj.isChoosen == false" style="margin-top: 0rpx"></view>
              <view class="choose-sth" style="margin-top: 0rpx" v-else></view>
              {{ obj.groupName }}
            </view>
            <view class="discount-content">
              <view class="discounts">特惠</view>
              <view class="discount-name">购买以下 3 项全部服务，享受
                8.5折，本次活动『优惠价格』仅限活动期间</view>
            </view>
            <view v-for="(item, _index) in obj.productList" :key="_index" class="service-item"
              @click="addOrRemoveOneService(item, index)">
              <view class="choose-button" v-if="item.isChoosen == false"></view>
              <view class="choose-sth" v-else></view>
              <view class="right-card">
                <img class="service-picture" :src="item.productImg" />
                <view class="right-info">
                  <view class="service-name">{{ item.productName }}</view>
                  <text class="service-desc">{{ item.productDesc }}</text>
                  <view class="service-price"><span style="font-size: 20rpx; margin-top: 10rpx">￥</span><span style="
                        font-family: 'D-DIN-PRO-700-Bold';
                        font-size: 44rpx;
                      ">{{ item.price }}</span>
                    <view class="old-price">原价 <span>￥{{ item.originPrice }}</span>
                      <view class="line"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="shopping-operation">
          <view class="shopping-cart">
            <view class="chosen">已选<span>{{ chosenNum }}</span>个</view>
            <view class="price">
              <view>合计：<span><span style="font-size: 24rpx">￥</span>{{ showPrice }}</span></view>
              <view class="discount-price" v-if="discountPrice != 0">共优惠￥{{ discountPrice }}</view>
            </view>
          </view>
          <view class="right-button" @click="gotoPay">
            <span style="margin-left: 20rpx">立即购买</span>
          </view>
        </view>
      </u-popup>
      <u-popup class="service-detail" v-if="showServiceDetail" v-model="showServiceDetail" :closeable="false"
        mode="bottom" border-radius="14" width="100%" height="70%">
        <view class="top">
          <view class="top-left">
            <view class="left-arrow" @click="toShop"></view>
            <view class="title">{{ shopList[currentShopListIndex].groupName }}说明</view>
          </view>
          <view class="close-button" @click="showServiceDetail = false"></view>
        </view>
        <scroll-view scroll-y="true" class="more-detail">
          <view class="service">
            <view class="title">{{ shopList[currentShopListIndex].groupName }}项</view>
            <view v-for="(item, index) in shopList[0].productList" class="service-card" :key="index">
              <view class="header">
                <view class="name">{{ item.productName }}</view>
                <view class="price"><span style="font-size: 24rpx">￥</span>{{ item.price }}</view>
              </view>
              <view class="footer">{{ item.productDesc }}</view>
            </view>
          </view>
          <view class="complimentary-detail">
            <view class="title">赠送细则</view>
            <view class="complimentary-text">
              <text class="shop-desc">
                针对顾问1对1服务项（简历优化/面试辅导），购买其中<text
                  style="color: #ff711e; margin: 0 10rpx">1</text>项，赠送职业测评、职业报告、AI简历诊断。购买<text
                  style="color: #ff711e; margin: 0 10rpx">2</text>项服务，包含以上赠送内容，加赠AI面评、订阅服务
                <!-- 购买<span>{{ index + 1 }}</span
                  >项服务,{{ index == 0 ? "赠送" : "包含以上服务，加赠"
                  }}{{ desc.services }} -->
              </text>
            </view>
          </view>
          <view class="other-service" v-for="(item, index) in serviceList" :key="index">
            <view class="title">{{ item.rightName }}</view>
            <!-- <view class="desc" v-for="_item in item.detail">{{ _item }}</view> -->
            <!-- <view class="desc">{{ item.rightRemark }}</view> -->
            <view class="desc" v-for="(ele, _index) in item.rightRemark.split('|')" :key="_index">{{ ele }}</view>
          </view>
        </scroll-view>
      </u-popup>
    </view>
    <u-modal v-model="showTips" :content="tipContent" width="70%" show-cancel-button @confirm="handleConfirmTips"
      @cancel="showTips = false"></u-modal>
    <!-- 这个tarPath是用于新用户通过海报扫码进来营销页面注册完成后跳转到的路径 -->
    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import { env } from "@/api/root.js";
import {
  addCartAndToOrder,
  addZhituPayOrder,
  getProductGroup,
  getUserInfo,
  cardRegist,
  getProductGroupLadderInfo,
  addBuryingPoint,
  getGroupDiscountList,
  getPersonOrDefaultCardType,
  getMarketingShowPage,
} from "@/api/modules/career";
import share from "@/mixins/share";
import LoginDialog from "@/components/LoginDialog";
export default {
  mixins: [share],
  components: { LoginDialog },
  data() {
    return {
      jumpPersonId: 0,
      fromApp: "", //从什么端app跳转进来
      groupId: "", //用于折扣的groupId
      discontList: [], // 折扣列表
      showPrice: 0,
      showMoreProduct: false,
      scene: 0,
      etId: 0, //漏斗分析埋点用
      isBuyPageBuryingPoint: true, // 混入的武汉购买页分享的变量
      // statType: null, // 判断用户埋点类型
      originFrom: "",
      buryingPointId: "",
      dynamicTitle: "",
      showTop: false,
      dynamicColor: "transparent",
      productSign: "", // 项目类型标识
      isShare: true,
      sharePath: `/pagesSub/userCenter/careerPathV2/components/CBuyPage?${this.shareQuery}`,
      shareTitle: "在找工作吗？职途顾问服务手把手带你掌握求职秘诀！",
      shareQuery: `cardTypeEncrypt=${this.cardKey}&isConsultant=` + "false",
      consultantId: "",
      currentShopListIndex: 0, // shopList点进去第几项
      navHeight: getApp().globalData.navHeight,
      provider: {},
      mallProductId: "",
      rightProductId: "",
      showPopup: false, // 控制弹出层显示隐藏
      showServiceDetail: false, // 控制服务详情弹出层显示隐藏
      chosenNum: 0, // 已选服务数量
      sumPrice: 0, // 计算得总价
      discountPrice: 0, // 优惠的金额
      shopList: [],
      serviceList: [], // 具体赠送服务
      cardKey: "", // 卡类型秘文
      groupName: "", // 当前服务名称
      isConsultant: false,
      showTips: false,
      openPopup: false,
      opt: {},
      targetPath: "", // 经过扫码进来的传过来的需要跳转的目标路径，作为备用
      cardNo: "",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      tipContent: "您已经是职途的用户，是否直接跳转到职途主页？",
      cardVersion: 2,
      experienceMore: false,
      imageUrl: "https://img3.job1001.com/ypMp/elan/images/tu.jpg",
      ZHI_TU_PAGE: "/pagesSub/userCenter/careerPathV2/index",
      ZHI_TU_PAGE_V1: "/pagesSub/userCenter/careerPath/index",
      WU_HAN_PAGE: "/pagesSub/userCenter/careerPathV2/components/WuHanBuyPage",
      C_PAGE: "/pagesSub/userCenter/careerPathV2/components/CBuyPage",
      targetPath: "",
      imageList: [
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage0.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage1.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage2.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage3_0.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage4.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage5.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage6.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage7.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage8.png",
        this.$imgBaseSelf + "career/positionDictionary/CBuyPageBGImage9.png",
      ],
      tradeId: 0,
    };
  },
  onLoad(opt) {
    console.log("opt--------------------", opt);
    this.targetPath = opt.targetPath || "";
    this.etId = opt.etId;
    this.imageUrl = "https://img3.job1001.com/ypMp/elan/images/tu.jpg";
    // 获取从填写姓名和手机号的页面传过来的参数来决定是否自动打开 popup
    this.openPopup = opt.openPopup || false;
    if (this.openPopup) {
      this.getProductGroupFn();
      this.showPopup = true;
      this.chosenNum = 0;
      this.sumPrice = 0;
      this.discountPrice = 0;
    }
    //从app跳转过来的，涉及埋点
    if (opt.fromApp) {
      this.fromApp = opt.fromApp;
      this.jumpPersonId = opt.jumpPersonId || 0;
      switch (this.fromApp) {
        case "android":
          wx.reportEvent("android_jump_zhitu_buypage", {});
          break;
        //因为安卓没有改这个字段 小程序先兼容一下
        case 1:
          wx.reportEvent("android_jump_zhitu_buypage", {});
          break;
        case "1":
          wx.reportEvent("android_jump_zhitu_buypage", {});
          break;
        case "iOS":
          wx.reportEvent("ios_jump_zhitu_buypage", {});
          break;
        default:
          break;
      }
      this.showMore();
    }
    //从公众号进来传这个字段会显示
    if (opt.showMoreProduct || opt.fromApp) {
      this.showMoreProduct = true;
    }
    // 这个是从ConsultantShare页面传过来获取参数的逻辑
    // 这里是内部聊天分享逻辑
    if (opt.cardType || opt.cardType != "undefined") {
      this.cardKey = opt.cardTypeEncrypt;
      this.cardType = opt.cardType;
      this.consultantId = opt.consultantId;
      this.isConsultant = opt.isConsultant ? true : false;
      this.showMoreProduct = opt.isConsultant ? false : true;
      this.isShare = opt.isShare ? true : false;
    } else {
      this.isShare = false;
      if (env == "test") {
        this.cardType = 54;
        uni.setStorageSync("cardType", 54);
      } else if (env == "pro") {
        this.cardType = 28;
        uni.setStorageSync("cardType", 28);
      }
      console.log("cardType00000000000000000000", this.cardType);
    }
    // 这个是从海报二维码跳转过来获取参数的逻辑
    // 这里无论是链接还是扫码都在下面
    // 此处开始是二维码逻辑
    let paramStr = decodeURIComponent(opt.q).split("?");
    console.log(
      "Array.isArray(paramStr) && paramStr.length > 1",
      Array.isArray(paramStr) && paramStr.length > 1
    );
    if (Array.isArray(paramStr) && paramStr.length > 1) {
      this.showMoreProduct = true;
      this.targetPath = paramStr[0];
      let str1 = decodeURIComponent(paramStr[1]);
      let str2 = str1.replace(/\\&quot;/g, '"');
      const index = str2.indexOf("&");
      const queryObj = JSON.parse(str2.slice(6, index));
      if (queryObj.t) {
        this.cardKey = queryObj.k || "";
        this.cardType = queryObj.t; // cardType
        this.consultantId = queryObj.d; // consultantId
        this.isShare = queryObj.i; // isShare
        this.isConsultant = false;
      } else {
        this.cardKey = queryObj.cardTypeEncrypt;
        this.cardType = queryObj.cardType;
        this.consultantId = queryObj.consultantId;
        this.isShare = queryObj.isShare;
        this.isConsultant = false;
      }

      //上报顾问海报扫码事件
      wx.reportEvent("consultant_poster_scan", {});
    }
    if (opt.consultantId) {
      // 如果参数里有consultantId说明是顾问分享出来的 就进入10003判断
      console.log("这里是进入到了10003");
      this.originFrom = "shareLink";
      this.addBuryingPointFn(10003, "", "", "", "");
      this.cardType = opt.cardType; // 这里带上cardType 项目的cardType是多少这里就是多少
      this.showMoreProduct = true;
    }

    // 兜底用，不要改，哎
    if (!this.cardType || this.cardType == "undefined") {
      if (env == "test") {
        this.cardType = 54;
        uni.setStorageSync("cardType", 54);
      } else if (env == "pro") {
        this.cardType = 28;
        uni.setStorageSync("cardType", 28);
      }
    }
    //从小程序跳转过来的情况是没有cardType的 所以要在这里加一个,q2c端的两个环境卡号不一样
    this.cardType && uni.setStorageSync("cardType", this.cardType);
    this.cardKey && uni.setStorageSync("cardKey", this.cardKey);
    this.consultantId && uni.setStorageSync("sellId", this.consultantId);
    this.shareQuery = `cardType=${opt.cardType}&cardTypeEncrypt=${
      this.cardKey
    }&consultantId=${uni.getStorageSync("person-id").slice(2)}&tradeId=${
      opt.tradeId
    }`;

    this.sharePath = `${this.C_PAGE}?${this.shareQuery}`;
    console.log("onload", this.cardType);

    //公众号tab栏点击跳转小程序职业顾问咨询营销页
    let jumpSource = "";
    if (opt.jumpSource && opt.jumpSource > 0) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType && opt.sourceType > 0) {
      sourceType = opt.sourceType;
    }
    if (opt.tradeId && opt.tradeId > 0) {
      this.tradeId = opt.tradeId; //公众号进来的
    }
    this.imageList[3] =
      this.$imgBaseSelf +
      "career/positionDictionary/CBuyPageBGImage3_" +
      this.tradeId +
      ".png"; //替换变动的图片
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20110, "", "", jumpSource, sourceType);
    }
  },
  onShow() {
    // '1011': '扫描二维码',
    // '1012': '长按图片识别二维码',
    // '1013': '扫描手机相册中选取的二维码',
    const launchOptions = uni.getLaunchOptionsSync();
    console.log("场景值:", launchOptions.scene);
    this.scene = launchOptions.scene;
    // 关于埋点接口的执行
    // 这里一共进行两次埋点操作，由后端来执行判断两次埋点的时间间隔来计算页面停留时间
    // 第一次埋点后端返回一个id 第二次埋点把这个id作为参数
    // 由于微信小程序可以切换到后台所以这里逻辑要做两种判断
    // 两种情况我们都要在onShow中进行第一次埋点
    // 1.如果切换到后台，此时进入onHide周期我们进行第二次埋点
    // 2.如果离开这个页面，或者杀死小程序，就进入onUnload周期，我们进行第二次埋点
    this.buryingPointId = "";
    switch (launchOptions.scene) {
      // 根据场景值来区分用户是如何到这个页面的
      case 1011:
        this.addBuryingPointFn(10004, "", "", "", "");
        break;
      case 1012:
        this.addBuryingPointFn(10005, "", "", "", "");
        break;
      default:
        // this.addBuryingPointFn(10001, "", "", "", "");
        break;
    }
    //  埋点统计访问次数
    this.addBuryingPointFn(10006, "", "", "", "");

    // 埋点统计时长
    this.addBuryingPointFn(10001, "", "", "", "");
  },
  created() {
    //获取支付提供商
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
      },
    });
  },
  onHide() {
    console.log("这里进入了onHide周期");
    this.$refs.loginDialog.setVisibility(false);
    this.addBuryingPointFn(10001, "", "", "", "");
  },
  onUnload() {
    console.log("这里进入了onUnload周期");
    this.addBuryingPointFn(10001, "", "", "", "");
  },
  mounted() {},
  methods: {
    async getGroupDiscountListFn() {
      const params = {
        groupId: this.groupId,
      };
      const res = await getGroupDiscountList(params);
      if (res.code == 200) {
        console.log("res", res);
        this.discontList = res.data;
      }
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType
          ? this.cardType
          : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 10001) this.buryingPointId = res.data.id;
        }
      }
    },
    //漏斗的埋点，主要差别就是带jumpEtId(上一次事件的etId)，
    async addJumpBuryingPointFn(jumpEtId, etId) {
      if (!this.personId || jumpEtId == etId) return;
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "",
        jumpEtId: jumpEtId || 0,
        personId: uni.getStorageSync("person-id").slice(2) || "0",
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        this.etId = etId;
      }
    },
    handleConfirmTips() {
      this.showTips = false;
      if (this.cardVersion == 2) {
        uni.navigateTo({
          url: this.ZHI_TU_PAGE,
        });
      } else {
        uni.navigateTo({
          url: this.ZHI_TU_PAGE_V1,
        });
      }
    },
    myPageScroll(e) {
      //滚动改变颜色
      this.showTop = e.target.scrollTop >= 60;
      if (this.showTop) {
        this.dynamicColor = "#ffffff";
      } else {
        this.dynamicTitle = "";
        this.dynamicColor = "transparent";
      }
    },
    handleGotoZhiTuPage() {
      uni.navigateTo({
        url: this.ZHI_TU_PAGE,
      });
    },
    loginSuccessBack() {
      // 是否是去体验更多
      if (this.experienceMore) {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      } else {
        // 判断是不是顾问角色
        if (this.isConsultant) {
          this.getProductGroupFn();
          this.showPopup = true;
          this.chosenNum = 0;
          this.sumPrice = 0;
          this.discountPrice = 0;
        } else {
          console.log("登录之后进入到这个分支");
          this.getUserInfoFn(this.C_PAGE);
        }
      }
    },
    async getProductGroupLadderInfoFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        id: this.shopList[this.currentShopListIndex].id,
      };
      const res = await getProductGroupLadderInfo(params);
      if (res.code == 200) {
        let tempService = [];
        res.data.forEach((item) => {
          item.rightList.forEach((_item) => {
            tempService.push(_item);
          });
        });
        this.serviceList = tempService;
      }
    },
    async cardRegistFn() {
      const params = {
        sellId: +this.consultantId,
      };
      if (this.cardKey && this.cardKey != "undefined") {
        params.cardKey = this.cardKey;
      } else {
        params.cardType = this.cardType;
      }
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn(targetPath) {
      const params = { uid: "" };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        if (!res.data.cardType) {
          // 说明此时没有绑卡 要自动绑定q2c端的卡
          await this.cardRegistFn();
          //然后手动调用一下 否则要点两次
          this.showMore();
        } else {
          // 这里调新街口 传入personId返回cardType
          // 把cardType设置到缓存里
          await this.getPersonOrDefaultCardTypeFn();

          if (uni.getStorageSync("cardType") != res.data.cardType) {
            this.cardVersion = res.data.cardVersion;
            this.showTips = true;
          } else {
            if (this.experienceMore) {
              this.handleGotoZhiTuPage();
            } else {
              await this.getProductGroupFn();
              this.chosenNum = 0;
              this.sumPrice = 0;
              this.discountPrice = 0;
            }
          }
        }
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        this.cardType = res.data.cardType;
        uni.setStorageSync("cardType", res.data.cardType);
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async getProductGroupFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        id: "1",
        unlockTypeList: [40],
        productSignList: ["ZHITU_TOC_SERVICE"],
      };
      const res = await getProductGroup(params);
      if (res.code == 200 && Array.isArray(res.data) && res.data.length) {
        this.productSign = res.data[0].productSign;
        this.groupId = res.data[0].id;
        this.getGroupDiscountListFn();
        if (this.productSign != "ZHITU_TOC_SERVICE") {
          uni.navigateTo({
            url: this.ZHI_TU_PAGE,
          });
        }
        this.shopList = res.data;
        this.showPopup = true;
        console.log("this.shopList", this.shopList);
        this.shopList.forEach((item) => {
          item.isChoosen = false;
          if (item.productList) {
            item.productList.forEach((_item) => {
              _item.isChoosen = false;
            });
          }
          if (item.ladderUnlockRightJson) {
            item.ladderUnlockRightJson.forEach((ele) => {
              ele.services = "";
              if (ele.rightList) {
                ele.rightList.forEach((_ele) => {
                  if (ele.services != "") {
                    ele.services = ele.services + "," + _ele.rightName;
                  } else {
                    ele.services = _ele.rightName;
                  }
                });
              }
            });
          }
        });
      } else {
        this.showTips = true;
      }
    },
    toShop() {
      this.showServiceDetail = false;
      this.showPopup = true;
    },
    addOneService(item, index) {
      item.isChoosen = true;
      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          // 如果是false才要加钱 否则会重复计算
          if (element.isChoosen == false) {
            this.sumPrice += element.price;
            this.chosenNum += 1;
            this.discountPrice += element.originPrice - element.price;
            element.isChoosen = true;
          }
        });
      } else {
        this.sumPrice += item.price;
        this.discountPrice += item.originPrice - item.price;
        this.chosenNum += 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    cancelOneService(item, index) {
      item.isChoosen = false;

      // 判断是一级还是二级
      if (item.productList) {
        item.productList.forEach((element) => {
          if (element.isChoosen == true) {
            this.sumPrice -= element.price;
            this.discountPrice -= element.originPrice - element.price;

            this.chosenNum -= 1;
            element.isChoosen = false;
          }
        });
      } else {
        this.sumPrice -= item.price;
        this.discountPrice -= item.originPrice - item.price;
        this.chosenNum -= 1;
        // 此时处于二级菜单 要监测此项点击完后一级的全选是否要打钩或者取消
        // 通过index到原数组中去判断
        this.shopList[index].isChoosen = true;
        this.shopList[index].productList.forEach((_item) => {
          if (_item.isChoosen == false) {
            // 遍历走一遍 如果有false说明没有全选 那么一级菜单就是false
            this.shopList[index].isChoosen = false;
          }
        });
      }
    },
    addOrRemoveOneService(item, index) {
      wx.reportEvent("consultant_buy_choose", {});
      this.addJumpBuryingPointFn(this.etId, 20034);
      if (item.isChoosen == false) {
        this.addOneService(item, index);
      } else {
        this.cancelOneService(item, index);
      }
      if (this.chosenNum > 0) {
        this.showPrice =
          this.sumPrice * this.discontList[this.chosenNum - 1].discount;
        this.showPrice = this.showPrice.toFixed(0);
      } else {
        this.showPrice = 0;
      }
    },
    handleMoreProduct() {
      this.addBuryingPointFn(20001, "", "", "", "");
      this.experienceMore = true;
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        this.showLoginDialog();
      } else {
        this.getUserInfoFn(this.ZHI_TU_PAGE);
      }
    },
    showMore() {
      // 如果用户没有登录就跳转到登录页面去
      this.personId = uni.getStorageSync("person-id").slice(2) || "";
      this.addJumpBuryingPointFn(this.etId, 20002);
      // 先判断是否登录
      if (!this.personId) {
        // 在这个地方，登录成功后会在loginSuccessBack这回调里面请求用户数据
        uni.setStorageSync("isZhituUser", true); //职途用户标识（注册的时候传regSource用
        this.showLoginDialog();
        return;
      }
      this.showPrice = 0;
      this.experienceMore = false;
      if (this.isConsultant) {
        this.getProductGroupFn();
        this.showPopup = true;
        this.choosenNum = 0;
        this.sumPrice = 0;
        this.discountPrice = 0;
      } else {
        // 在这里调用一个接口 传入personId 返回cardType
        // 如果是山西的卡 48 有cardType ==48
        // 没有cardType就是新用户 默认返回28或者空
        this.getUserInfoFn(this.C_PAGE);
      }
    },
    gotoServiceDetail(index) {
      this.showPopup = false;
      this.showServiceDetail = true;
      this.currentShopListIndex = index;
      this.getProductGroupLadderInfoFn();
    },
    gotoPay() {
      if (this.chosenNum > 0) {
        this.shopList.forEach((item) => {
          if (item.productList) {
            item.productList.forEach((_item) => {
              if (_item.isChoosen == true) {
                if (this.mallProductId !== "") {
                  this.mallProductId =
                    this.mallProductId + "," + _item.mallProductId;
                } else {
                  this.mallProductId = _item.mallProductId;
                }
                if (this.rightProductId !== "") {
                  this.rightProductId = this.rightProductId + "," + _item.id;
                } else {
                  this.rightProductId = _item.id;
                }
              }
            });
          }
        });
        this.addCartAndToOrder();
      } else {
        console.log("没有选择商品");
      }
    },
    //1.生成订单
    async addCartAndToOrder() {
      uni.showLoading({
        title: "生成订单中...",
        mask: true,
      });

      wx.reportEvent("submit_consultant_service_order", {});
      this.addJumpBuryingPointFn(this.etId, 20035);

      const params = {
        orderType: "ZT_SERVICE",
        mallProductId: this.mallProductId, // 这个等着后端返回
        channelType: 80,
        sourceType: 3,
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        cardType: uni.getStorageSync("cardType"),
        orderCondition: {
          rightProductId: this.rightProductId, // 等着后端返回
          groupId: this.groupId,
        },
      };
      const res = await addCartAndToOrder(params);
      if (res.code == 200) {
        this.rightProductId = "";
        this.mallProductId = "";
        console.log("resaddCartAndToOrder");
        this.addZhituPayOrder(res.data);
      } else {
        this.rightProductId = "";
        this.mallProductId = "";
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || "生成订单失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //2.通过订单获取支付信息
    async addZhituPayOrder(data) {
      const params = {
        ...data,
        orderType: "ZT_SERVICE",
        wayCode: "WX_LITE",
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        personName: uni.getStorageSync("personName"),
        openid: uni.getStorageSync("openid"),
      };
      const res = await addZhituPayOrder(params);
      if (res.code == 200) {
        this.requestPayment(res.data);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: res.status_desc || "获取商品信息失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    //3.使用支付信息调用支付
    requestPayment(data) {
      uni.hideLoading();
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }

      const payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: payData.timeStamp,
        nonceStr: payData.nonceStr,
        package: payData.package,
        signType: payData.signType,
        paySign: payData.paySign,
        success: (res) => {
          console.log("支付成功");
          this.addJumpBuryingPointFn(this.etId, 20036);
          uni.setStorageSync("edition-Type", 10);
          uni.setStorageSync("isBuy", 1);
          // this.handlePaySuccess(res);
          uni.navigateTo({
            url: `/pagesSub/userCenter/careerPathV2/components/zhituPayFinish?mallOrderId=${data.orderId}&targetPath=${this.targetPath}`,
          });
        },
        fail: (err) => {
          console.log("支付失败");
          uni.showToast({
            title: "支付失败,请您重新支付",
            icon: "none",
            duration: 3000,
          });
          // uni.navigateTo({
          //   url:
          //     `/pagesSub/userCenter/careerPathV2/components/PayFinish?isFailed=` +
          //     true,
          // });
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";

@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.title-container {
  display: flex;
  flex-direction: row;

  .return-index {
    position: absolute;
    left: 70rpx;
  }

  .left-arrow {
    position: absolute;
    left: 36rpx;
    top: 30rpx;
    width: 28rpx;
    height: 28rpx;
    color: #000000;
    background-image: url($img-base + "career/arrow-left-wuhan.png?v=1");
    background-size: 100% 100%;
  }
}

.buy-page {
  width: 100%;

  .container {
    height: 90vh;
    // .sale-introduction-first {
    //   height: 3121.5rpx;
    //   background-image: url($img-base-person + "CBuyPageBackground0.png");
    //   background-size: 100%;
    // }

    // .sale-introduction-second {
    //   height: 3122rpx;
    //   background-image: url($img-base-person + "CBuyPageBackground1.png");
    //   background-size: 100%;
    // }

    // .sale-introduction-third {
    //   height: 3118rpx;
    //   background-image: url($img-base-person + "CBuyPageBackground2.png");
    //   background-size: 100%;
    // }
    .sale-introduction-image {
      width: 100%;
      min-height: 100rpx;
      background-size: 100%;
    }
  }

  .operation {
    width: 100%;
    height: 10vh;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    padding: 18rpx 32rpx 30rpx 30rpx;
    background-color: #ffffff;

    .left-button {
      flex-basis: 240rpx;
      height: 80rpx;
      border-radius: 200rpx;
      border: 2rpx solid #ff711e;
      margin-right: 16rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #ff711e;
      font-size: 30rpx;
    }

    .right-button,
    .right-button-solo {
      flex-grow: 1;
      height: 84rpx;
      background-image: url($img-base + "careerPath/wuhan-buynow2.png");
      background-size: 100% 100%;
      color: #ffffff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: left;
      padding: 24rpx 48rpx 20rpx 48rpx;

      span {
        font-family: D-DIN-PRO, D-DIN-PRO;
        font-weight: 800;
        font-size: 32rpx;
      }
    }

    .right-button-solo {
      background-image: url($img-base + "careerPath/wuhan-buynow.png");
    }
  }

  .shopping-operation {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    .shopping-cart {
      flex-basis: 360rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      margin-top: -40rpx;

      .chosen {
        color: #888888;
        font-size: 28rpx;

        span {
          color: #ff711e;
          margin: 0 10rpx;
          font-weight: 800;
        }
      }

      .price {
        color: #222222;
        font-size: 30rpx;

        span {
          color: #ff711e;
          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
        }
      }
    }
  }

  .popup-info {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .title {
      font-weight: 800;
      font-size: 36rpx;
      color: #222222;
      padding: 28rpx 32rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .close-button {
        width: 40rpx;
        height: 40rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + "career/shoppingCarCloseButton.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .choose-service {
      height: 77%;
      border-radius: 16rpx;
      background-color: #ffffff;
      width: calc(100% - 32rpx);
      margin: 0 auto;
      padding: 34rpx 24rpx;
      box-sizing: border-box;
    }

    .shop {
      margin-bottom: 36rpx;

      .shop-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 800;
        font-size: 36rpx;
        color: #111111;
      }

      .discount-content {
        margin-top: 10rpx;
        display: flex;
        flex-direction: row;
        align-items: center;

        .discounts {
          width: 90rpx;
          height: 40rpx;
          border-radius: 6rpx;
          border: 2rpx solid #fb5806;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .discount-name {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #fb5806;
          margin-left: 20rpx;
        }
      }

      .shop-desc {
        /* margin-left: 60rpx; */
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;

        span {
          color: #ff711e;
          margin: 0 10rpx;
        }
      }

      .desc-box {
        width: calc(100% - 50rpx);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* padding: 0 50rpx; */
        margin-left: 60rpx;
        margin-top: 12rpx;

        .left-desc {
          flex-basis: 90%;
        }

        .right-arrow {
          width: 24rpx;
          height: 24rpx;
          margin-right: 12rpx;
          background-image: url($img-base + "career/right-arrow.png?v=1");
          background-size: 100% 100%;
        }
      }

      .service-item {
        display: flex;
        flex-direction: row;
        /* align-items: center; */
        margin-top: 42rpx;
        box-sizing: border-box;

        .service-picture {
          width: 148rpx;
          height: 148rpx;
          border-radius: 16rpx;
        }

        .right-card {
          display: flex;
          flex-direction: row;
          align-items: top;

          .right-info {
            margin-left: 18rpx;
            width: 450rpx;

            .service-name {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: 800;
              font-size: 32rpx;
              color: #333333;
              margin-bottom: 12rpx;
            }

            .service-desc {
              white-space: normal;
              font-weight: 400;
              font-size: 28rpx;
              color: #777777;
              /* margin-top: 12rpx; */
              line-height: 40rpx;
            }

            .service-price {
              margin-top: 12rpx;
              color: #ff711e;
              /* font-weight: 800; */
              font-family: "D-DIN-PRO-700-Bold";
              display: flex;
              flex-direction: row;
              align-items: center;

              .old-price {
                margin-left: 10px;
                position: relative;
                padding: 5rpx;
                color: #d29875;

                .line {
                  position: absolute;
                  top: 50%;
                  width: 100%;
                  height: 2rpx;
                  background-color: #af734f;
                }
              }
            }
          }
        }
      }

      .choose-button,
      .choose-sth {
        /* width: 40rpx; d*/
        height: 40rpx;
        border-radius: 32rpx;
        border: 2rpx solid #d3d3d3;
        margin-right: 20rpx;
        flex-basis: 40rpx;
        margin-top: 54rpx;
      }

      .choose-sth {
        background-image: url($img-base-person + "chooseSth.png");
        background-size: 100%;
      }
    }

    .shopping-operation {
      background-color: #ffffff;
      height: 10vh;
      position: absolute;
      bottom: 0;
      padding: 0rpx 32rpx 30rpx 30rpx;

      .discount-price {
        color: #fb5806;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
      }

      .right-button {
        flex-grow: 1;
        height: 84rpx;
        background-image: url($img-base + "careerPath/wuhan-buynow3.png");
        background-size: 100% 100%;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: left;
        padding: 24rpx 48rpx 20rpx 48rpx;
        margin-top: -40rpx;

        span {
          font-family: D-DIN-PRO, D-DIN-PRO;
          font-weight: 800;
          font-size: 32rpx;
        }
      }
    }
  }

  .service-detail {
    ::v-deep .u-drawer-bottom {
      background-color: #f4f6f8;
    }

    .top {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0 34rpx;
      justify-content: space-between;

      .top-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .left-arrow {
        width: 28rpx;
        height: 28rpx;
        color: #000000;
        margin-right: 8rpx;
        background-image: url($img-base + "career/arrow-left-wuhan.png?v=1");
        background-size: 100% 100%;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
        padding: 28rpx 32rpx 28rpx 12rpx;
      }

      .close-button {
        width: 48rpx;
        height: 48rpx;
        padding: 12rpx;
        box-sizing: border-box;
        background-image: url($img-base + "career/sharepopupCloseBtn.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .more-detail {
      height: 90%;
      /* border-radius: 16rpx; */
      background-color: #f4f6f8;
      width: calc(100% - 16rpx);
      margin: 0 auto;
      padding: 12rpx 24rpx 34rpx 24rpx;
      box-sizing: border-box;

      .service {
        border-radius: 16rpx;
        width: 100%;
        background-color: #ffffff;
        padding: 28rpx 24rpx;
      }

      .title {
        font-weight: 800;
        font-size: 36rpx;
        color: #222222;
      }

      .service-card {
        margin-top: 16rpx;
        padding: 28rpx 32rpx;
        background-color: #fff5e8;
        border-radius: 6rpx;

        .header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;

          .name {
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 32rpx;
            color: #222222;
          }

          .price {
            font-weight: 800;
            font-size: 44rpx;
            color: #ff5e00;
            font-family: "D-DIN-PRO-700-Bold";
            font-weight: 800;
          }
        }

        .footer {
          font-weight: 400;
          font-size: 28rpx;
          color: #9c8074;
          margin-top: 16rpx;
        }
      }

      .complimentary-detail {
        width: 100%;
        padding: 28rpx 12rpx;

        .complimentary-text {
          color: #666666;
          width: 100%;
          margin-top: 24rpx;

          span {
            white-space: normal;
          }
        }

        .shop-desc {
          /* margin-left: 60rpx; */
          width: 100%;
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;

          span {
            color: #ff711e;
            margin: 0 10rpx;
          }
        }
      }

      .other-service {
        width: 100%;
        padding: 24rpx 32rpx;
        background-color: #eaeced;
        margin-top: 16rpx;
        border-radius: 6rpx;

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
